
<template>
  <!-- 核算分析-凭证查询-经费账凭证查询 页面-->
  <div style="display:flex;flex-direction: column;height:100%">
    <div>
      <cus-allcard style="padding-bottom:0px" :showTitle="false">
        <div class="topBody">
          <div class="topBodyItem">
            <span class="itemSpan">账簿年度</span>
            <Select v-model="selectForm.accountbookId" placeholder="请选择账簿年度" @on-change="accountbookIdChange()"
              class="itemImport">
              <Option v-for="item in selectForm.yearList" :value="item.accountbookId" :key="item.year">{{ item.year }}
              </Option>
            </Select>
          </div>

          <div class="topBodyItem">
            <span class="itemSpan">起始日期</span>
            <Date-picker type="date" v-model="selectForm.starttime" :clearable="false" :options="timeOptions"
              placeholder="请选择起始日期" @on-change="tiemStartChange()" class="itemImport"></Date-picker>
          </div>
          <div class="topBodyItem">
            <span class="itemSpan">截止日期</span>
            <Date-picker type="date" v-model="selectForm.endtime" :clearable="false" :options="timeOptions"
              placeholder="请选择截止日期" @on-change="tiemEndChange()" class="itemImport"></Date-picker>
          </div>
          <div class="topBodyItem" v-if="selectForm.certificateSnTS != null">
            <span class="itemSpan">凭证编号</span>
            <Input v-model="selectForm.certificateSn" class="itemImport" type="number"
              :placeholder="'最大凭证：' + selectForm.certificateSnTS" maxlength="15"></Input>
          </div>
          <div class="topBodyItem">
            <span class="itemSpan">入账方式</span>
            <Select v-model="selectForm.accountMethod" placeholder="请选择入账方式" @on-change="isznjzflagChange()"
              class="itemImport">
              <Option value="all">全部</Option>
              <Option value="intelligent">智能入账</Option>
              <Option value="auto">自动记账</Option>
              <Option value="manual">手工录入</Option>
            </Select>
          </div>
          <div class="topBodyItem">
            <span class="itemSpan">科目名称</span>
            <Select v-model="selectForm.subjectCode" placeholder="请选择科目" :clearable="true"
              @on-change="subjectfullnameChange()" class="itemImport">
              <Option value="-1">全部</Option>
              <Option v-for="item in selectForm.subjectfullnameList" :value="item.subjectcode"
                :key="item.subjectfullname">{{ item.subjectfullname }}</Option>
            </Select>
          </div>

          <div class="topBodyItem">
            <cus-Button type="primary" class="ml_10" style="margin-right: 0;" @onClick="queryJFCertificateApi"
              v-permission="20">查询</cus-Button>
          </div>
        </div>
      </cus-allcard>
    </div>
    <div class="tableBox">
      <cusTable border :loading="form.loading" :columns="columns" :data="data" :bottomClass="['cus-page']"
        @on-sort-change="filterChange($event)" ref="cusTable">
        <template slot-scope="{ row }" slot="certificatedate">
          {{ new Date(row.certificatedate).Format('yyyy-MM-dd') }}
        </template>

        <template slot-scope="{ row,index }" slot="operation">
          <div class="flex">
            <cus-button type="text" size="small" style='color:#1E6FFF;' @onClick="addAbstractButton(index, row)">
              查看详情
            </cus-button>

          </div>
        </template>
      </cusTable>
      <div style="width: 100%; display: flex; justify-content: flex-end">
        <cus-page :data="pages" class="mt_20" @pageChange="queryJFCertificateApi()"></cus-page>
      </div>
      <!-- <cus-allcard style="margin-top:20px;padding-top:24px" :showTitle="false">

       

      </cus-allcard> -->
    </div>
    <!-- 使用粘性定位 -->
    <div v-if="superiorState" class="sticky-button">
      <cus-Button class="mr_10" type="default" @onClick="returnHome">返回首页</cus-Button>
    </div>
  </div>
</template>
<script>
import {
  getAccountBookByUserId,
  queryJFCertificate,
  getAllSubjectList,
  getLastCertSn
} from '@/api/businessAccountingApi/essentialInformationApi'
export default {

  data() {
    return {
      superiorState: false,
      form: {
        loading: false,
        name: '',
        startTime: '',
        endTime: ''
      },
      // 查询条件的集合
      selectForm: {
        year: null, // 账薄年度
        isjiezhuan: null, // 是否结转
        yearList: [], // 账薄年度列表
        accountbookId: null, // 账簿id
        starttime: null, // 起始日期
        certificateSn: null, // 凭证编号
        certificateSnTS: null, // 凭证编号提示
        order: 0, // 排列顺序
        accountMethod: '', //入账方式
        isznjzflag: 2, // 智能入账
        endtime: null,// 截至日期
        subjectfullname: null,//科目名称
        subjectCode: '-1',//科目编码
        subjectfullnameList: [],//科目全称列表
      },


      // 表头
      columns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          minWidth: 70
        },
        {
          title: '凭证日期',
          slot: 'certificatedate',
          align: 'center',
          sortable: 'custom',
          minWidth: 100
        },
        {
          title: '凭证编号',
          key: 'certificatesn',
          sortable: 'custom',
          align: 'center',
          minWidth: 100
        },
        
      
        {
          title: '科目名称',
          key: 'subjectname',
          align: 'center',
          minWidth: 100
        },
        {
          title: '摘要',
          key: 'feeabstract',
          align: 'center',
          minWidth: 100
        },
        // {
        //   title: '备注信息',
        //   key: 'remark',
        //   align: 'center',
        //   minWidth: 100
        // },
        {
          title: '操作',
          slot: 'operation',
          align: 'center',
          fixed: 'right',
          minWidth: 100
        }
      ],
      data: [], // 表格列表
      // 分页
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      timeOptions: {
        disabledDate(date) {
          return (
            date < new Date(new Date().Format('yyyy') - 1 + '-12-31') || date > new Date(new Date().Format('yyyy-MM-dd'))
          )
        }
      },
      tableHeight: 0
    }
  },
  activated() {
    // this.getAccountBookByUserIdApi()// 根据用户id查询账簿 接口
    if (this.$route.query.superior == 'home') {
      this.superiorState = true
    } else {
      this.superiorState = false
    }
  },
  mounted() {
    this.selectForm.starttime = new Date().Format('yyyy') + '-01-01'
    this.selectForm.endtime = new Date().Format('yyyy-MM-dd')
    this.getAccountBookByUserIdApi()// 根据用户id查询账簿 接口
  },
  methods: {

    // 根据用户id查询账簿 接口
    getAccountBookByUserIdApi() {
      this.form.loading = true
      console.log('进入查询');
      return new Promise((resolve) => {
        getAccountBookByUserId({
          userid: this.vuex_user.base.id // 用户id
        }).then((res) => {
          console.log('请求成功');
          this.form.loading = false

          if (res.errorcode === 0) {
            this.selectForm.yearList = res.basAccountbookList
            this.selectForm.accountbookId = res.basAccountbookList[0].accountbookId
            this.selectForm.year = res.basAccountbookList[0].year
            this.selectForm.isjiezhuan = res.basAccountbookList[0].isjiezhuan
            if (this.selectForm.year == new Date().Format('yyyy')) {
              this.selectForm.starttime = new Date().Format('yyyy') + '-01-01' // 起始日期
              this.selectForm.endtime = new Date().Format('yyyy-MM-dd') // 截止日期
            } else {
              this.selectForm.starttime = this.selectForm.year + '-01-01' // 起始日期
              this.selectForm.endtime = this.selectForm.year + '-12-31' // 截止日期
            }
            this.optionDate() // 限制日期封装方法
            this.getAllSubjectListApi()// 查询所有科目(不分页) 接口
            this.getLastCertSnApi() // 查询凭证号码 接口
            resolve()
          } else {
            this.$Message.error(res.resultmsg)
          }
        })
      })
    },
    // 根据用户id查询账簿 接口
    getAllSubjectListApi() {
      this.form.loading = true
      this.selectForm.subjectfullnameList = []
      return new Promise((resolve) => {
        getAllSubjectList({
          accountbookId: this.selectForm.accountbookId,//账簿id
          subjecttype: 0,//科目类型(0经费,1粮秣)
          userid: this.vuex_user.base.id // 用户id
        }).then((res) => {
          this.form.loading = false
          if (res.errorcode === 0) {
            this.selectForm.subjectfullnameList = res.subjectlist
            resolve()
          } else {
            this.$Message.error(res.resultmsg)
          }
          this.queryJFCertificateApi()// 凭证查询 接口
        })
      })
    },
    // 凭证查询 接口
    queryJFCertificateApi() {
      if (this.selectForm.starttime == '' || this.selectForm.endtime == '') {
        this.$Message.info("起始/截止日期不能为空")
        return
      }
      let valueData = {
        abstractType: 0, // 0经费 1粮秣
        accountbookId: this.selectForm.accountbookId,
        certificateSn: this.selectForm.certificateSn,
        beginTime: new Date(this.selectForm.starttime).Format('yyyy-MM-dd'),
        endTime: new Date(this.selectForm.endtime).Format('yyyy-MM-dd'),
        order: Number(this.selectForm.order),
        accountMethod:this.selectForm.accountMethod == 'all' ? null : this.selectForm.accountMethod,
        // isznjzflag: Number(this.selectForm.isznjzflag),
        current: this.pages.page,
        size: this.pages.pageSize,
        subjectCode: this.selectForm.subjectCode == '-1' ? null : this.selectForm.subjectCode
      }
      this.form.loading = true
      return new Promise((resolve) => {
        queryJFCertificate(valueData).then((res) => {
          this.form.loading = false
          if (res.errorcode === 0) {
            this.data = res.data
            this.pages.pageTotal = res.totalSize
            resolve()
          } else {
            this.$Message.error(res.resultmsg)
          }
        })
      })
    },
    // 查询凭证号码 接口
    getLastCertSnApi() {
      this.form.loading = true
      return new Promise((resolve) => {
        getLastCertSn({
          accountyear: this.selectForm.year, // 账簿年度
          department: '', // 部门名称
          userid: this.vuex_user.base.id // 用户id
        }).then((res) => {
          this.form.loading = false
          if (res.errorcode === 0) {
            this.selectForm.certificateSnTS = res.lastcertsn;
            this.$nextTick(() => {
              this.$refs['cusTable'].getHeight();
            })
            console.log('ssss', this.selectForm.certificateSnTS)
            resolve()
          } else {
            this.$Message.error(res.resultmsg)
          }
        })
      })
    },
    // 账簿年度改变回调
    accountbookIdChange() {
      this.pages.page = 1
      this.selectForm.yearList.forEach(element => {
        if (element.accountbookId === this.selectForm.accountbookId) {
          this.selectForm.year = element.year
          this.selectForm.isjiezhuan = element.isjiezhuan
          if (this.selectForm.year == new Date().Format('yyyy')) {
            this.selectForm.starttime = new Date().Format('yyyy') + '-01-01' // 起始日期
            this.selectForm.endtime = new Date().Format('yyyy-MM-dd') // 截止日期
          } else {
            this.selectForm.starttime = this.selectForm.year + '-01-01' // 起始日期
            this.selectForm.endtime = this.selectForm.year + '-12-31' // 截止日期
          }
          this.optionDate() // 限制日期封装方法
        }
      })
      this.queryJFCertificateApi()
    },
    // 限制日期封装方法
    optionDate() {
      if (this.selectForm.year == new Date().Format('yyyy')) {
        this.timeOptions = {
          disabledDate(value) {
            return (
              value < new Date(new Date().Format('yyyy') - 1 + '-12-31') || value > new Date(new Date().Format('yyyy-MM-dd'))
            )
          }
        }
      } else {
        let startOption = (Number(this.selectForm.year) - 1) + '-12-31' // 限制开始能点日期 必须先建变量存储，才能放进new Date()
        let endOption = (Number(this.selectForm.year)) + '-12-31' // 限制结束能点日期 必须先建变量存储，才能放进new Date()
        this.timeOptions = {
          disabledDate(value) {
            return value < new Date(startOption) || value > new Date(endOption)
          }
        }
      }
    },
    // 起始日期改变回调
    tiemStartChange() {
      this.selectForm.starttime = new Date(this.selectForm.starttime).Format('yyyy-MM-dd')
      this.selectForm.endtime = new Date(this.selectForm.endtime).Format('yyyy-MM-dd')
      if (new Date(this.selectForm.starttime).Format('MM') > new Date(this.selectForm.endtime).Format('MM')) { //起始日期月份 大于 截止日期月份
        this.$Message.info("起始日期大于截止日期")
        this.selectForm.endtime = ''
      } else if (new Date(this.selectForm.starttime).Format('MM') == new Date(this.selectForm.endtime).Format('MM')) { //起始日期月份 等于 截止日期月份
        if (new Date(this.selectForm.starttime).Format('dd') > new Date(this.selectForm.endtime).Format('dd')) {
          this.$Message.info("起始日期大于截止日期")
          this.selectForm.endtime = ''
        }
      }
    },
    // 截止日期改变回调
    tiemEndChange() {
      this.selectForm.starttime = new Date(this.selectForm.starttime).Format('yyyy-MM-dd')
      this.selectForm.endtime = new Date(this.selectForm.endtime).Format('yyyy-MM-dd')
      if (new Date(this.selectForm.starttime).Format('MM') > new Date(this.selectForm.endtime).Format('MM')) { //起始日期月份 大于 截止日期月份
        this.$Message.success("截止日期大于起始日期")
        this.selectForm.starttime = ''
      } else if (new Date(this.selectForm.starttime).Format('MM') == new Date(this.selectForm.endtime).Format('MM')) { //起始日期月份 等于 截止日期月份
        if (new Date(this.selectForm.starttime).Format('dd') > new Date(this.selectForm.endtime).Format('dd')) {
          this.$Message.success("截止日期大于起始日期")
          this.selectForm.starttime = ''
        }
      }
    },
    // 排列顺序改变回调
    orderChange() {
      this.pages.page = 1
      this.queryJFCertificateApi()
    },
    // 智能入账改变回调
    isznjzflagChange() {
      this.pages.page = 1
      this.queryJFCertificateApi()
    },
    // 添加摘要按钮
    addAbstractButton(index, valueData) {
      this.$router.push({
        path: '/view/supplierChangeAnalysis/voucherQuery/voucherQueryJFZItem',
        query: {
          year: this.selectForm.year,
          certificateId: valueData.certificateId,
          isjiezhuan: this.selectForm.isjiezhuan,
          valueData: valueData,
          superior: 'JFZ' // 区分时添加进来 还是修改进来 add/edit
        }
      })
    },
    // 首页返回按钮
    returnHome() {
      this.$router.push('/home')
    },
    subjectfullnameChange() {
      this.pages.page = 1
      this.pages.pageSize = 10
      this.queryJFCertificateApi()
    },
    // 点击筛选条件回调
    filterChange(value) {
      this.selectForm.order = value.order == 'desc' ? 1 : 0
      this.queryJFCertificateApi()
    }
  }
}
</script>
<style lang="less" scoped>
.topBody {
  display: flex;
  padding-top: 24px;
  align-items: center;
  flex-wrap: wrap;

  .topBodyItem {
    display: flex;
    align-items: center;
    margin-right: 12px;
    margin-bottom: 20px;

    .itemSpan {
      white-space: nowrap;
      width: 80px;
      text-align: right;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85) !important;
      margin-right: 10px;
    }

    .itemImport {
      width: 200px;
    }
  }
}
.tableBox {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
  padding: 20px;
  margin-top: 20px;
  box-sizing: border-box;
}
</style>
